<template>
	<div id="JueseManage">
		<div class="top">
			<el-button type="primary" style='margin-left: 5px;'
				@click='showAddNewRole=true'
			>
				新增角色
			</el-button>
		</div>
		<table border="1" 
			cellspacing="1" 
			cellpadding="1" 
			width="100%"
			style="table-layout: fixed;"	
		>
				<td>角色名称</td>
				<td>角色描述</td>
				<td>详情</td>
				<td>操作</td>
			</tr>
			<tr v-for="(items,key) in allRoles" :key="key">
				<td>{{items.roleName}}</td>
				<td>{{items.roleDesc}}</td>
				<td></td>
				<td>
					<el-button type="primary" size='mini' @click='dialogVisible=true,role=items' >编辑角色</el-button>
					<el-button type="danger" size='mini' @click='deleteAllRoles(items)'>删除角色</el-button>
				</td>
			</tr>
			
		</table>
		
		<editor-manage :dialogVisible='dialogVisible' :role=role />
		
		<add-new-role v-if='showAddNewRole' />
	</div>
</template>

<script>
	import AddNewRole from './AddNewRole'
	import EditorManage from './EditorManage'
	export default{
		components:{AddNewRole,EditorManage},
		mounted(){
			//角色管理页面挂载完成执行vuex里面的异步函数
			 this.$store.dispatch('loadAllRoles',{api:this.$apis.allRoles});
		},
		data(){
			return {
				showAddNew:false,
				showAddNewRole:false,
				dialogVisible:false,
				role:{},
			}
		},
	
	    computed:{
	    	allRoles(){
	    		return this.$store.getters.allRoles;
	    	}
	    },
	    methods: {
	    	deleteAllRoles(items){
	    		var action = ()=>{
	    			
		    		if(items.roleName == 'admin'){
		    			this.$alert('不能删除该角色','警告',{
		    				confirmButtonText:'确定',
		    			});
		    		}else{
		    			this.$http.post(this.$apis.deleteRole,{_id:items._id})
		    			.then((res)=>{
		    				
		    				this.$message({
		    					message:res.data.message,
		    					type:res.data.success?'success':'danger'
		    				});
		    				this.$store.dispatch('loadAllRoles');
		    			})
		    		}
	    		}
	    		
	    		
    			this.operatorConfirm(action,'删除角色')
	    	}
		}
	}
	    
</script>

<style lang="scss" scoped>
	td{
		border: 1px solid red;
		padding: 20px;
	}
	.top{
		width: 99.8%;
		height: 61px;
		border: 1px solid red;
		border-bottom: none;
		text-align: left;
		line-height: 61px;
	}	
</style>